import { useState, useMemo } from 'react';
import { useDidShow } from '@tarojs/taro';
import { useSelector } from 'react-redux'
import { View, OpenData, Text } from '@tarojs/components';
import { Table } from '@nutui/nutui-react-taro';
import { TASK_STATUS } from '../../const/const.js';
import './index.scss';

export default function MyPage () {
  const list = useSelector(state => state.task.list);
  const initStatistics = function() {
    const undoTaskList = list.filter((item) => item.status === TASK_STATUS.undo.key);
    const doingTaskList = list.filter((item) => item.status === TASK_STATUS.doing.key);
    const doneTaskList = list.filter((item) => item.status === TASK_STATUS.done.key);
    return [
      {
        status: TASK_STATUS.undo.text,
        count: undoTaskList.length
      },{
        status: TASK_STATUS.doing.text,
        count: doingTaskList.length
      },{
        status: TASK_STATUS.done.text,
        count: doneTaskList.length
      }
    ]
  }
  const [statistics, setStatistics] = useState(initStatistics);
  // const statistics = useMemo(() => {
  //   console.log('--myPage--:useMemo', list)
  //   return initStatistics();
  // }, [list])

  const [columns] = useState([
    {
      title: '任务状态',
      key: 'status',
      align: 'center'
    },
    {
      title: '总数',
      key: 'count',
      align: 'center'
    }
  ])
  console.log('--myPage--:global', list, statistics)
  useDidShow(() => {
    console.log('--componentDidShow--')
    setStatistics(initStatistics())
  })
  return (
    <View className='my-page'>
      <View className='user-avatar-url'>
        <OpenData type='userAvatarUrl' />
      </View>
      <Text className='my-page-tips'>高效的一天从TODO List开始</Text>
      <View className='statistics-table'>
        <h3 className='statistics-title'>任务统计数据</h3>
        <Table 
          columns={ columns } 
          data={ statistics }
        />
        {statistics.map((item) => {
          return <Text>{item.count}</Text>
        })}
      </View>
    </View>
  )
}
